<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>个人信息show</title>
    <link rel="stylesheet" href="../../css/style1.css">
    <script src="../../js/jquery3.js"></script>
    <script src="../../js/script.js"></script>
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css"/>
    <style type="text/css">
        .layui-tab {
            width: 60%;
            margin: 0 auto;
            margin-top: 10px;
        }

        .layui-tab-content {
        }

        .layui-this {
            background-color: #40AFFE;
        }

        .layui-this span {
            color: white;
        }

        li {
            width: 46.5%;
        }

        li span {
            font-size: 25px;
        }

        .layui-input {
            width: 350px;
            margin-bottom: 20px;
        }

        .layui-form {
            width: 80%;
            margin: 0 auto;
        }

        .layui-form-item {
            width: 82%;
            margin: 0 auto;
        }

        .layui-form-label {
            width: 90px;
        }

    </style>
</head>
<body>
<div class="layui-tab">
    <h1 style="width: 80%;margin: 0 auto;text-align: center;">个人信息</h1>
    <form class="layui-form" action="" lay-filter="example">
        <div class="layui-form-item" style="margin-top: 50px;">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="userName" lay-verify="title" autocomplete="off" placeholder="请输入用户名"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="userPwd" lay-verify="pass" autocomplete="off" placeholder="请输入密码"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">真实姓名</label>
            <div class="layui-input-block">
                <input type="text" name="trueName" lay-verify="title" autocomplete="off" placeholder="请输入真实姓名"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" lay-verify="title" autocomplete="off" placeholder="请输入邮箱"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="tel" lay-verify="title" autocomplete="off" placeholder="请输入手机号"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block" style="margin-left: 225px;margin-top: 20px">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="hidden" name="id" lay-verify="title" autocomplete="off" placeholder="请输入id"
                       class="layui-input">
            </div>

            <div class="layui-input-block">
                <input type="hidden" name="isValid" lay-verify="title" autocomplete="off" placeholder="请输入是否可用"
                       class="layui-input">
            </div>
        </div>

    </form>
</div>

<!-- 底部动画 -->
<div style="margin-top: 40px;width: 100%;">
</div>
<div class="wave-box">
    <div class="marquee-box marquee-up" id="marquee-box">
        <div class="marquee">
            <div class="wave-list-box" id="wave-list-box1">
                <ul>
                    <li>
                        <img height="60" alt="波浪" src="../../img/wave_02.png">
                    </li>
                </ul>
            </div>
            <div class="wave-list-box" id="wave-list-box2">
                <ul>
                    <li>
                        <img height="60" alt="波浪" src="../../img/wave_02.png">
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="marquee-box" id="marquee-box3">
        <div class="marquee">
            <div class="wave-list-box" id="wave-list-box4">
                <ul>
                    <li>
                        <img height="60" alt="波浪" src="../../img/wave_01.png">
                    </li>
                </ul>
            </div>
            <div class="wave-list-box" id="wave-list-box5">
                <ul>
                    <li>
                        <img height="60" alt="波浪" src="../../img/wave_01.png">
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script src="../../js/jquery3.js" type="text/javascript" charset="utf-8"></script>
<script src="../../layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use('element', function () {
        var $ = layui.jquery,
            element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

    });


    //拿到当前用户信息
    var userData;
    $(function () {
        //向后台发送ajax请求
        $.ajax({
            //编写json格式，设置属性和值
            url: "http://localhost:8080/crm/user/getUser",
            contentType: "application/json;charset=utf-8",
            data: "",
            dataType: "json",
            type: "post",
            success: function (data) {
                //服务器端成功响应的json数据，进行解析
                userData = data;
            }
        })

    })

    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 1) {
                    return '不能为空';
                }
            },
            pass: [
                /^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'
            ],
            content: function (value) {
                layedit.sync(editIndex);
            }
        });

        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });

        //监听提交
        form.on('submit(demo1)', function (data) {
            //向后台发送ajax请求
            $.ajax({
                //编写json格式，设置属性和值
                url: "http://localhost:8080/crm/user/update",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(data.field),
                dataType: "text",
                type: "post",
                async: false,
                success: function (data) {
                    layer.msg("修改成功！请重新登录，正在退出系统...", function () {
                        //子页面跳父页面
                        parent.location.href = "../login.html";
                    });
                },
            })
            return false;
        });

        //表单赋值
        // layui.$('#LAY-component-form-setval').on('click', function giveValue() {
        form.val('example', {
            "userName": userData.userName,
            "trueName": userData.trueName,
            "email": userData.email,
            "tel": userData.tel,
            "id": userData.id,
            "userPwd": userData.userPwd,
            "isValid": userData.isValid
        });
        // });

    });
</script>

</body>

</html>
